<ion-card class="card-file ion-activatable">
    @if (file) {
        <ion-item tappable class="ion-text-wrap item-file" (click)="download($event, true)" [detail]="false">
            <ion-thumbnail slot="start">
                <img [src]="fileIcon" alt="" role="presentation" />
            </ion-thumbnail>
            <ion-label>
                <p class="item-heading">
                    <span (ariaButtonClick)="download($event, true)">{{fileName}}</span>
                </p>
                @if (fileSizeReadable || showTime) {
                    <p>
                        @if (fileSizeReadable) {
                            {{ fileSizeReadable }}
                        }
                        @if (fileSizeReadable && showTime) {
                            ·
                        }
                        @if (showTime) {
                            {{ timemodified * 1000 | coreFormatDate }}
                        }
                    </p>
                }
            </ion-label>
            <div slot="end" class="flex-row">
                <core-download-refresh [status]="state" [enabled]="canDownload" [loading]="isDownloading"
                    [canTrustDownload]="!alwaysDownload" (action)="download()" />

                @if (isDownloaded && isIOS) {
                    <ion-button fill="clear" (click)="openFile($event, true)" [title]="openButtonLabel | translate">
                        <ion-icon slot="icon-only" [name]="openButtonIcon" aria-hidden="true" />
                    </ion-button>
                } @else if (!isDownloading && canDelete) {
                    <ion-button fill="clear" (click)="delete($event)" [ariaLabel]="'core.delete' | translate" color="danger">
                        <ion-icon slot="icon-only" name="fas-trash" aria-hidden="true" />
                    </ion-button>
                }
            </div>
        </ion-item>
    }
    <ion-ripple-effect />
</ion-card>
